<template>
  <div>
    <div style="display: inline-block;position: relative">
      <div class="upload___file" style="">
        <el-upload
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleUploadChange"
          :multiple="false"
          accept="image/png,image/jpeg,image/jpg"
          action=""
          class="avatar-uploader"
        >
          <img v-if="fileUUID" :src="fileUUID" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <div v-if="fileUUID" class="tool-bar">
          <div class="fl">
            <el-tooltip class="item" effect="dark" content="文件预览" placement="top">
              <svg-icon icon-class="btnPreview" @click="global.handleFilePreview(fileUUID)" />
            </el-tooltip>
          </div>
          <div class="fr">
            <el-tooltip class="item" effect="dark" content="文件删除" placement="top">
              <svg-icon icon-class="btnRemove" @click="removeFile(fileUUID)" />
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <!--重命名-->
    <el-dialog
      title="图片上传"
      :visible.sync="cropperDialogVisible"
      width="500px"
      :before-close="handleClose"
      :modal-append-to-body="false"
      class="upload-file-dialog"
    >
      <el-row :gutter="20">
        <el-col :span="24">支持jpg、jpeg、png，且照片小于{{ sizeLimit }}M。</el-col>
        <el-col :span="15">
          <vue-cropper
            ref="cropper"
            :aspect-ratio="cropRatio"
            :src="cropImgSrc"
            :ready="cropImage"
            :zoom="cropImage"
            :cropmove="cropImage"
            style="width:100%;height:300px;"
          />
        </el-col>
        <el-col :span="9">
          <h5 style="font-size: 14px;font-weight: bold;">预览：</h5>
          <img :src="cropImgResult" style="width: 120px;border-radius: 5px;">
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCrop">取 消</el-button>
        <el-button type="primary" plain @click="confirmCropperImage">上传</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: { VueCropper },
  props: {
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    },
    sizeLimit: {
      type: Number,
      required: false,
      default: 2
    },
    crop: {
      type: Boolean,
      default: true
    },
    cropRatio: {
      type: Number,
      required: false,
      default: 1 / 1
    }
  },
  data() {
    return {
      fileUUID: '',
      dialogVisible: false,
      uploadSuccessFile: [],
      fileList: [],
      fileStatus: false,
      fileStatusInterval: null,
      cropperDialogVisible: false,
      cropImgSrc: '',
      cropImgResult: ''

    }
  },
  computed: {},
  watch: {
    fileUUID: function(val) {
      if (val) {
        this.$emit('input', val)
      } else {
        this.$emit('input', '')
      }
    },
    value: function(val) {
      setTimeout(() => {
        this.fileUUID = val
      }, 200)
    }
  },
  created() {
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭?').then(_ => {
        done()
      }).catch(_ => {})
    },
    // 选择文件
    handleUploadChange(file) {
      if (!file.raw.type.includes('image/')) {
        this.msgWarning('请选择图片文件!')
        return
      }
      const isLt = file.size / 1024 / 1024 < this.sizeLimit
      if (!isLt) {
        this.msgWarning('文件大小不能超过 ' + this.sizeLimit + 'MB!')
        return
      }
      if (this.crop) {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.cropperDialogVisible = true
          this.cropImgSrc = event.target.result
          this.$refs.cropper && this.$refs.cropper.replace(event.target.result)
        }
        reader.readAsDataURL(file.raw)
      } else {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.cropImgResult = event.target.result
          this.confirmCropperImage()
        }
        reader.readAsDataURL(file.raw)
      }
    },
    cropImage() {
      this.cropImgResult = this.$refs.cropper.getCroppedCanvas().toDataURL()
    },
    confirmCropperImage() {
      console.log(this.cropImgResult)
      this.$store.dispatch('base64Upload', { base64: this.cropImgResult }).then((res) => {
        this.fileUUID = res
        this.cropperDialogVisible = false
        this.$message.success('文件上传成功')
      }).catch((_) => {})
    },
    cancelCrop() {
      this.cropperDialogVisible = false
    },
    async removeFile(uuid) {
      try {
        this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileResourcesRemove', uuid).then(response => {
            this.fileUUID = null
            this.$message.success('删除成功')
          }).catch(() => { this.fileUUID = null })
        }).catch((_) => {

        })
      } catch (_) {
        console.log()
      }
    }

  }
}
</script>
  <style rel="stylesheet/scss" lang="scss">
  .upload-file-dialog {
    .el-dialog__body {
      padding:0px 20px 20px !important;
    }
    .el-button{
      width: auto;
    }
    .cropper-modal{
      border-radius: 5px !important;
    }
  }
  </style>
  <style rel="stylesheet/scss" lang="scss" scoped>

  .rename-file-dialog{
    .el-button{
      width: auto;
    }
    .el-input{
      width: 100%;
    }
  }
  .upload___file:hover .tool-bar{
    display: block;
  }
  .upload___file {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    .tool-bar{
      position: absolute;
      top: -1px;
      height: 21px;
      background: rgba(0,0,0,0.6);
      width: 100%;
      border-radius: 6px 6px 0px 0px;
      display: none;
      .svg-icon{
        width: 12px !important;
        color: #fff;
        margin: 0 5px 3px;
      }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 92px;
      height: 92px;
      line-height: 92px;
      text-align: center;
    }
    .avatar {
      width: 92px;
      height: 92px;
      display: block;
    }
  }
  </style>
